<template>
    <a-layout>
        <a-table
                :columns="columns"
                :row-key="record => record.login.uuid"
                :data-source="dataSource"
                :pagination="pagination"
                :loading="loading"
                @change="handleTableChange"
        >
            <template #name="{ text }">{{ text.first }} {{ text.last }}</template>
        </a-table>
    </a-layout>
</template>

<script lang="ts">
    import { TableState, TableStateFilters } from 'ant-design-vue/es/table/interface';
    import { usePagination } from 'vue-request';
    import { computed, defineComponent } from 'vue';
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            sorter: true,
            width: '20%',
            slots: { customRender: 'name' },
        },
        {
            title: 'Gender',
            dataIndex: 'gender',
            filters: [
                { text: 'Male', value: 'male' },
                { text: 'Female', value: 'female' },
            ],
            width: '20%',
        },
        {
            title: 'Email',
            dataIndex: 'email',
        },
    ];

    type Pagination = TableState['pagination'];
    type APIParams = {
        results: number;
        page?: number;
        sortField?: string;
        sortOrder?: number;
        [key: string]: any;
    };
    type APIResult = {
        results: {
            gender: 'female' | 'male';
            name: string;
            email: string;
        }[];
    };

    const queryData = (params: APIParams) => {
        return `https://randomuser.me/api?noinfo&${new URLSearchParams(params)}`;
    };

    export default defineComponent({
        setup() {


            return {
                columns,
            };
        },
    });
</script>